<template>
    <div class="from">
        <div class="formTip">
            <van-image :src="img"></van-image>
            <p>请设置密码</p>
        </div>
        <van-field v-model="password" :type="type" placeholder="请输入登录密码" :right-icon="typeIcon"
            @click-right-icon="changeType" />
        请输入至少6位密码，包含至少一个大写字母，1个小写字母，1个数字
        <div class="my-button">
            <van-button type="danger" :disabled="flag" block @click="registerFn">完成</van-button>
        </div>
    </div>
</template>
<script>
import Vue from "vue";
import { Field, Button, Image as VanImage, Toast } from "vant";
import { doFinishRegister } from "@/api/user";

Vue.use(Toast);
Vue.use(Button);
Vue.use(Field);
Vue.use(VanImage);
export default {
    data() {
        return {
            typeIcon: "closed-eye",
            password: "",
            type: "password",
            img: "",
        };
    },
    methods: {
        registerFn() {
            // 设置密码完成注册
            doFinishRegister({
                tel: localStorage.getItem('tel'),
                password: this.password,
            }).then((res) => {
                // 注册成功
                Toast('注册成功')
                this.$router.go(-3)
            })
        },
        changeType() {
            this.type = this.type === "password" ? "text" : "password";
            this.typeIcon = this.type === "password" ? "closed-eye" : "eye-o";
        },
    },
    computed: {
        flag() {
            // 请输入至少6位密码，包含至少一个大写字母，1个小写字母，1个数字
            if (
                /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])\S*$/.test(
                    this.password
                )
            ) {
                return false;
            } else {
                return true;
            }
        },
    },
};
</script>
<style>
.formTip {
    display: flex;
    height: 200px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>
